<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由</title>
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/vue2-animate.css" type="text/css">

    <script type="text/javascript" src="./lib/vue/vue.js"></script>
    <script type="text/javascript" src="./lib/vue/router/vue-router.js"></script>
    <style>

    </style>

</head>

<body>
    <div class="container" id="app">
        <ul>Vue2.0 路由使用
            <li>1. 定义路由组件</li>
            <li>2. 定义路由配置</li>
            <li>3. 创建路由对象，传入路由配置</li>
            <li>4. 创建和挂载根实例</li>
        </ul>

        <hr>
        <!-- router-link 实现导航 to：指定链接 -->
        <router-link to="/home">Home</router-link>
        <router-link to="/news">News</router-link>
        <router-link to="/about">About</router-link>
    
        <!-- 路由渲染  -->
        <router-view></router-view>
    </div>
</body>


<script>
    // 1 定义路由组件
    const home = {
        template: '<h2>home page</h2>'
    };
    const news = {
        template: '<h2>news page</h2>'
    };
    const about = {
        template: '<h2>about page</h2>'
    };

    // 2 定义路由
    const routes = [
        {path: '/home', component: home},
        {path: '/news', component: news},
        {path: '/about', component: about}
    ];

    // 3 创建路由实例，传入routes
    const router = new VueRouter({
        routes: routes
    })

    // 4 创建和挂载根实例
    const app = new Vue({
            router: router
    }).$mount('#app');

</script>

</html>